<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">日志列表</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">日志查询</li>
          <li class="breadcrumb-item active">日志列表</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <form id="searchForm" class="needs-validation form-inline" novalidate="">
      <div class="form-group">
        <label for="keyword" class="mr-2">关键字</label>
        <input type="text" class="form-control" id="keyword" required="">
      </div>
      <div class="form-group">
        <label for="ip" class="mr-2">ip地址</label>
        <input type="text" class="form-control" id="ip" required="">
      </div>
      <div class="form-group">
        <label for="ip" class="mr-2">开始时间</label>
        <input type="text" class="form-control" id="startTime">
      </div>
      <div class="form-group">
        <label for="ip" class="mr-2">结束时间</label>
        <input type="text" class="form-control" id="endTime">
      </div>
      <div class="form-group">
        <button class="btn btn-primary ml-3" type="submit">查询</button>
        <button class="btn btn-default ml-2" type="reset">重置</button>
      </div>
    </form>
  </div>
  <div class="card card-body">
    <table class="table-sm" id="table"></table>
  </div>
</section>

<script>
  $(function () {

    $('#startTime').daterangepicker({
      "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
      singleDatePicker: true, //单日历
      showDropdowns: true, //年月份下拉框
      timePicker: true, //显示时间
      timePicker24Hour: true, //时间制
      timePickerSeconds: true, //时间显示到秒
      startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
      maxDate: moment(new Date()), //设置最大日期
      "opens": "center",
      showWeekNumbers: true,
      locale: {
        format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
        applyLabel: '确定', //确定按钮文本
        cancelLabel: '取消', //取消按钮文本
        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
          '七月', '八月', '九月', '十月', '十一月', '十二月'
        ],
        firstDay: 1
      },
    }, function(start) {
      console.log(start.format('YYYY-MM-DD HH:mm:ss'));
    });

    $('#endTime').daterangepicker({
      "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
      singleDatePicker: true, //单日历
      showDropdowns: true, //年月份下拉框
      timePicker: true, //显示时间
      timePicker24Hour: true, //时间制
      timePickerSeconds: true, //时间显示到秒
      startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
      maxDate: moment(new Date()), //设置最大日期
      "opens": "center",
      showWeekNumbers: true,
      locale: {
        format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
        applyLabel: '确定', //确定按钮文本
        cancelLabel: '取消', //取消按钮文本
        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
          '七月', '八月', '九月', '十月', '十一月', '十二月'
        ],
        firstDay: 1
      },
    }, function(start) {
      console.log(start.format('YYYY-MM-DD HH:mm:ss'));
    });

    $('#startTime').val('');
    $('#endTime').val('');

    var columns = [
      {
        title: '序号',
        field: '',
        align: 'center',
        formatter: function (value, row, index) {
          var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
          var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
          return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
        }
      },
      {
        field: 'logMethod',
        title: '操作方法',
        align: "left"
      }, {
        field: 'logParams',
        title: '方法参数',
        align: "left",
      }, {
        field: 'logContent',
        title: '日志内容',
        align: "left",
      }, {
        field: 'ip',
        title: 'ip地址',
        align: "center",
      }, {
        field: 'logResult',
        title: '执行结果',
        align: "center",
      }, {
        field: 'errorMsg',
        title: '错误信息',
        align: "left"
      }, {
        field: 'createTime',
        title: '操作时间',
        align: "center",
      }];

    var options = {
      id: "#table",
      url: '/log/log',
      columns: columns,
      toolbar: '#toolbar',
      showRefresh: true,
      queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
      Core.refreshTable("#table")
    }

    // 查询参数
    function queryParams(params) {
      return {
        page: params.pageNumber,
        size: params.pageSize,
        ip: $("#ip").val(),
        keyword: $("#keyword").val(),
        startTime: $("#startTime").val(),
        endTime: $("#endTime").val(),
      };
    }

    // 查询
    $('#searchForm').submit(function (event) {
      event.preventDefault();
      event.stopPropagation();
      refreshTable();
    })
  });

</script>